<!-- 消息通知组件 -->
<template>
  <div class="news-notify">
    <el-popover placement="bottom-end" width="500" :offset="9" trigger="click">
      <!-- 标签页切换 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="1">
          <div slot="label">
            <el-badge :is-dot='isProjectCount' class="nav-el-badge-item">项目消息</el-badge>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2">
          <div slot="label">
            <el-badge :is-dot='isSystemCount' class="nav-el-badge-item">系统消息</el-badge>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 列表 -->
      <el-table
        style="width: 100%"
        max-height="300"
        :data="listData"
        :show-header="false"
        @row-click="rowClick"
        :row-class-name="rowClassName"
      >
        <el-table-column prop="title" align="left" width="120">
          <template slot-scope="scope">{{scope.row.title}}</template>
        </el-table-column>
        <el-table-column prop="content" align="left">
          <template slot-scope="scope">
            <div class="noticeContent">{{scope.row.content}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" align="right" width="100"></el-table-column>
      </el-table>
      <el-row class="handle-list" type="flex" justify="space-between">
        <div style="line-height: 32px;padding-top:12px" @click="setAllRead">全部标记为已读</div>
        <div
          style="line-height: 32px;padding-top:12px"
          @click="herfto('profiles',{navIndex:3})"
        >全部消息</div>
      </el-row>
      <!-- 小铃铛 -->
      <el-badge :is-dot="isTotal" slot="reference">
        <i class="el-icon-message-solid"></i>
      </el-badge>
    </el-popover>
  </div>
</template>


<script>
import {getNoticeList, getNewNotice, setAllNoticeRead} from '@/api/profiles'
export default {
  components: {},
  data() {
    return {
      activeName: '1',
      isTotal: false,
      isProjectCount: false,
      isSystemCount: false,
      current: 1,
      size: 10,
      total: 0,
      listData: null,
      isLoadMore: true
    }
  },
  computed: {},
  methods: {
    setAllRead() {
      setAllNoticeRead(Object.assign({}, {type: this.activeName})).then(res => {
        let {
          data: {code, success}
        } = res
        if (code == 200 && success) {
          this.listData =[]
          this.getNew()
          this.getList()
        }
      })
    },
    rowClick(row, column, event) {
      let item = {
        navIndex: 3,
        type: this.activeName,
        ...row
      }
      this.herfto('profiles', item)
    },
    herfto(name, item) {
      this.$router.push({
        path: `/${name}`,
        query: {
          ...item
        }
      })
    },
    getNew() {
      getNewNotice().then(res => {
        let {
          data: {projectCount, systemCount, total}
        } = res
        if (total > 0) {
          this.isTotal = true
        } else {
          this.isTotal = false
        }
        if (projectCount > 0) {
          this.isProjectCount = true
        } else {
          this.isProjectCount = false
        }
        if (systemCount > 0) {
          this.isSystemCount = true
        } else {
          this.isSystemCount = false
        }
      })
    },
    getList() {
      this.isLoadMore = false
      getNoticeList(Object.assign({}, {type: this.activeName, pageSize: this.size, pageNo: this.current})).then(res => {
        let {
          data: {
            code,
            success,
            result: {current, size, total, records},
            message
          }
        } = res
        if (code == 200 && success) {
          this.current = current
          this.size = size
          this.total = total
          this.listData.push(...records)
          this.isLoadMore = true
        }
      })
    },
    rowClassName({row, rowindex}) {
      if (row.isRead == 1) {
        return 'read'
      }
    },
    handleClick() {
      this.listData = []
      this.current = 1
      this.getList()
    },
    loadMore() {
      if (this.isLoadMore && this.total > this.listData.length) {
        this.current += 1
        this.getList()
      }
    }
  },
  watch: {
    '$route.path': function (newPath, oldPath) {
      this.getNew()
      this.getList()
    }
  },
  created() {
    this.listData = []
    this.getNew()
    this.getList()
  },
  mounted() {}
}
</script>


<style lang='less' scoped>
.nav-el-badge-item {
  line-height: 16px;
}
.noticeContent {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.news-notify {
  // 图标大小
  .el-icon-message-solid {
    font-size: 18px;
  }
  .handle-list {
    line-height: 36px;
  }
}
</style>